<template>
  <div>
    <!-- 引入导航条的组件标签，在这里设置一个showhome可以表示 -->
    <navigation title="个人中心" :showhome="true"></navigation>
    <div class="header" @click="$router.push('/editpro')">
      <!-- 头像 -->
      <div class="avatar">
        <img :src="userInfo.head_img" v-if='userInfo.head_img' alt />
        <img v-else src="../assets/xixi.png" alt />
      </div>
      <!-- 姓名 -->
      <div class="profile">
        <div>
          <span v-if='userInfo.gender===1' class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>
          <!-- 动态的赋值得的值 -->
          {{userInfo.nickname}}
        </div>
        <!-- 利用moment这个组件来实现日期的改变 -->
        <p>{{moment(userInfo.create_date).format('YYYY-MM-DD')}}</p>
      </div>
      <span class="arrow iconfont iconjiantou1"></span>
    </div>
    <!-- 列表行开始 -->
    <!-- 第一行，我的关注行列 -->
    <Personalliber focusText="我的关注" disliberText="关注的用户" @checkclick="focusclick" @click.native="$router.push('/focuspage')"></Personalliber>
    <!-- 第二行我的跟帖 -->
    <Personalliber focusText="我的跟帖" disliberText="跟帖/回复" @checkclick="revertclick" @click.native="$router.push('/comment')"></Personalliber>
    <!-- 第三行我的收藏 -->
    <Personalliber focusText="我的收藏" disliberText="文章/视频" @checkclick="articleclick"></Personalliber>
    <!-- 第四行，我的设置 -->
    <Personalliber focusText="设置" disliberText @checkclick="settingclick"></Personalliber>
    <!-- 为了可以拉开退出登录与上面的距离，中间可以放置一个空的盒子，来挤开他们的距离 -->
    <div class="space"></div>
    <!-- 调用按钮框的 -->
    <!-- 并且在点击退出的时候,做出登出的效果 -->
    <logout btntext="退出登录" @click.native="logout"></logout>
  </div>
</template>

<script>
//引入封装条形
import Personalliber from "../components/liberbar";
//引入moment模块
import moment from "moment";
// 引入导航栏组件
import navigation from "../components/navgitar";
// 引入退出登录框
import logout from "../components/mybtn";
export default {
  data() {
    return {
      userInfo: {}, //利用userInfo来接收返回体的值
      moment, //引入moment模块的使用
    };
  },
  components: {
    //注册个人条形封装条和导航条还有按钮
    Personalliber,
    navigation,
    logout,
  },
  methods: {
    //   给每个封装条设置点击事件
    focusclick() {
      console.log("我被关注的用户点击了");
    },
    revertclick() {
      console.log("我被跟帖的用户点击了");
    },
    articleclick() {
      console.log("我的被看文章的用户点击了");
       this.$router.push('/collect')
    },
    settingclick() {
      // console.log("我被搞设置的用户点击了");
      this.$router.push('/collect')
    },
    // 给退出登录设置退出登录的点击事件
    logout() {
        // 引用vant UI的方式来显示是否退出登录
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定退出吗",
        })//当用户点击的是确定的时候，移出用户的token值，并且让页面跳转到登录页中去
        .then(() => {
          localStorage.removeItem("token");
          // localStorage.clear()
          this.$router.replace("/");
        });
    },
  },
  mounted() {
    //   当加载的时候，发起页面请求，得到用户信息，因为这里需要得到的动态值是id值，所以这里需要得到页面加载的时候得到的id值
    let id = localStorage.getItem("userId");
    // 页面加载的时候发起axios请求
    this.$axios({
      url: "/user/" + id, //请求地址，需要附带的是id值
    // 设置请求头
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    }).then((res) => {//请求成功返回的返回体
      console.log(res);
      const { data } = res.data; //解构出red.data里面的data
      this.userInfo = data; //并且用data的接收
    });
  },
};
</script>

<style lang='less' scoped>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
.header {
  padding: 20/360 * 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px solid #cccccc;
  .avatar {
    img {
      display: block;
      width: 70/360 * 100vw;
      height: 70/360 * 100vw;
      border-radius: 50%;
      object-fit: cover;
      // object-fit: contain;
    }
  }
  .profile {
    flex: 1;
    // line-height: 1.5;
    padding-left: 20/360 * 100vw;
    p {
      color: #999;
    }
    .iconxingbienan {
      color: blue;
    };
    .iconxingbienv {
      color: hotpink;
    }
  }
}
.space {
  height: 40/360 * 100vw;
}
//列表按钮栏
</style>